<template>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</template>

<script setup></script>

<style scoped>
.container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
}

.container .item {
  /* flex: 1; */
  /* width: 30%; */
  /* flex-basis的优先级要比width高：flex-basis是占据主轴空间的大小 */
  /* flex-basis: 20%;
  width: 30%; */

  flex: 0 1 30%;
  border: 1px solid red;
}
</style>
